<template>
	<view class="outside">
		<!-- <block v-if="outSideInfo.length==0">
			<view class="outside-item">
				<view class="outside-info">
					<view class="title">
						手机号
					</view>
					<view class="not-set">
						未设置
					</view>
				</view>
				<uv-switch v-model="value" disabled></uv-switch>
			</view>
			<view class="outside-item">
				<view class="outside-info">
					<view class="title">
						微信
					</view>
					<view class="not-set">
						未设置
					</view>
				</view>
				<uv-switch v-model="value" disabled></uv-switch>
			</view>
			<view class="outside-item">
				<view class="outside-info">
					<view class="title">
						QQ
					</view>
					<view class="not-set">
						未设置
					</view>
				</view>
				<uv-switch v-model="value" disabled></uv-switch>
			</view>
			<view class="outside-item">
				<view class="outside-info">
					<view class="title">
						邮箱
					</view>
					<view class="not-set">
						未设置
					</view>
				</view>
				<uv-switch v-model="value" disabled></uv-switch>
			</view>
			<view class="outside-item">
				<view class="outside-info">
					<view class="title">
						抖音
					</view>
					<view class="not-set">
						未设置
					</view>
				</view>
				<uv-switch v-model="value" disabled></uv-switch>
			</view>
			<view class="outside-item">
				<view class="outside-info">
					<view class="title">
						小红书
					</view>
					<view class="not-set">
						未设置
					</view>
				</view>
				<uv-switch v-model="value" disabled></uv-switch>
			</view>
		</block>
		<block v-else>
			<view class="outside-item" v-if="outSideInfo.mobile">
				<view class="outside-info">
					<view class="title">
						手机号
					</view>
					<view class="info">
						{{outSideInfo.mobile.content}}
					</view>
				</view>
				<uv-switch :disabled="outSideInfo.mobile.content==''" v-model="outSideInfo.mobile.status" activeColor="#FE3052" activeValue="0"
					inactiveValue="1" size="20" @change="changeSwitch($event,'mobile')"></uv-switch>
			</view>
			<view class="outside-item" v-if="outSideInfo.wechat">
				<view class="outside-info">
					<view class="title">
						微信
					</view>
					<view class="info">
						{{outSideInfo.wechat.content}}
					</view>
				</view>
				<uv-switch :disabled="outSideInfo.wechat.content==''" v-model="outSideInfo.wechat.status" activeColor="#FE3052" activeValue="0"
					inactiveValue="1" size="20" @change="changeSwitch($event,'wechat')"></uv-switch>
			</view>
			<view class="outside-item" v-if="outSideInfo.qq">
				<view class="outside-info">
					<view class="title">
						QQ
					</view>
					<view class="info">
						{{outSideInfo.qq.content}}
					</view>
				</view>
				<uv-switch :disabled="outSideInfo.qq.content==''" v-model="outSideInfo.qq.status" activeColor="#FE3052" activeValue="0"
					inactiveValue="1" size="20" @change="changeSwitch($event,'qq')"></uv-switch>
			</view>
			<view class="outside-item" v-if="outSideInfo.email">
				<view class="outside-info">
					<view class="title">
						邮箱
					</view>
					<view class="info">
						{{outSideInfo.email.content}}
					</view>
				</view>
				<uv-switch :disabled="outSideInfo.email.content==''" v-model="outSideInfo.email.status" activeColor="#FE3052" activeValue="0"
					inactiveValue="1" size="20" @change="changeSwitch($event,'email')"></uv-switch>
			</view>
			<view class="outside-item" v-if="outSideInfo.tiktok">
				<view class="outside-info">
					<view class="title">
						抖音
					</view>
					<view class="info">
						{{outSideInfo.tiktok.content}}
					</view>
				</view>
				<uv-switch :disabled="outSideInfo.tiktok.content==''" v-model="outSideInfo.tiktok.status" activeColor="#FE3052" activeValue="0"
					inactiveValue="1" size="20" @change="changeSwitch($event,'tiktok')"></uv-switch>
			</view>
			<view class="outside-item" v-if="outSideInfo.red_book">
				<view class="outside-info">
					<view class="title">
						小红书
					</view>
					<view class="info">
						{{outSideInfo.red_book.content}}
					</view>
				</view>
				<uv-switch :disabled="outSideInfo.red_book.content==''" v-model="outSideInfo.red_book.status" activeColor="#FE3052" activeValue="0"
					inactiveValue="1" size="20" @change="changeSwitch($event,'red_book')"></uv-switch>
			</view>
		</block> -->
		<view class="outside-item" >
			<view class="outside-info">
				<view class="title">
					手机
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入手机号" v-model="mobile.content" />
				</view>
			</view>
			<uv-switch :disabled="mobile.content==''" v-model="mobile.status" activeColor="#FE3052" activeValue="0" inactiveValue="1" size="20" @change="changeSwitch($event,'mobile')"></uv-switch>
		</view>
		<view class="outside-item" >
			<view class="outside-info">
				<view class="title">
					微信
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入微信号" v-model="wechat.content" />
				</view>
			</view>
			<uv-switch :disabled="wechat.content==''" v-model="wechat.status" activeColor="#FE3052" activeValue="0" inactiveValue="1" size="20" @change="changeSwitch($event,'wechat')"></uv-switch>
		</view>
		<view class="outside-item" >
			<view class="outside-info">
				<view class="title">
					QQ
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入QQ号" v-model="qq.content" />
				</view>
			</view>
			<uv-switch :disabled="qq.content==''" v-model="qq.status" activeColor="#FE3052" activeValue="0" inactiveValue="1" size="20" @change="changeSwitch($event,'qq')"></uv-switch>
		</view>
		<view class="outside-item" >
			<view class="outside-info">
				<view class="title">
					邮箱
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入邮箱号" v-model="email.content" />
				</view>
			</view>
			<uv-switch :disabled="email.content==''" v-model="email.status" activeColor="#FE3052" activeValue="0" inactiveValue="1" size="20" @change="changeSwitch($event,'email')"></uv-switch>
		</view>
		<view class="outside-item" >
			<view class="outside-info">
				<view class="title">
					抖音
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入抖音号" v-model="tiktok.content" />
				</view>
			</view>
			<uv-switch :disabled="tiktok.content==''" v-model="tiktok.status" activeColor="#FE3052" activeValue="0" inactiveValue="1" size="20" @change="changeSwitch($event,'tiktok')"></uv-switch>
		</view>
		<view class="outside-item" >
			<view class="outside-info">
				<view class="title">
					小红书
				</view>
				<view class="not-set">
					<input type="text" placeholder="请输入小红书ID" v-model="red_book.content" />
				</view>
			</view>
			<uv-switch :disabled="red_book.content==''" v-model="red_book.status" activeColor="#FE3052" activeValue="0" inactiveValue="1" size="20" @change="changeSwitch($event,'red_book')"></uv-switch>
		</view>
		<!-- 	<view class="edit-info-btn" @click="toedit">
			修改信息
		</view> -->
		<view class="edit-info-btn" @click="save(true)">保存</view>
	</view>
</template>

<script setup>
	import { onShow } from "@dcloudio/uni-app"
	import { ref, reactive } from 'vue';
	import { throttle } from '@/utils/utils.js'
	import { useUserStore } from '@/store/modules/user.js'
	const userstore = useUserStore()
	onShow(() => {
		getOutSideInfo()
	})
	const switchvalue = ref(0)
	const value = ref(false)
	const outSideInfo = ref([])
	const mobile=ref({
		content:'',
		status:'1'
	})
	const wechat=ref({
		content:'',
		status:'1'
	})
	const qq=ref({
		content:'',
		status:'1'
	})
	const email=ref({
		content:'',
		status:'1'
	})
	const tiktok=ref({
		content:'',
		status:'1'
	})
	const red_book=ref({
		content:'',
		status:'1'
	})
	
	const changeSwitch = throttle((e, content) => {
		if (e == '0') {
			save()
		}
		userstore.changeStatus({
			content,
			status: e
		})
	}, 1000)
	// 保存
	const save = throttle(async (type) => {
		
		let res = await userstore.emitOutSideInfo({
			mobile: mobile.value.content,
			wechat:wechat.value.content,
			qq: qq.value.content,
			email: email.value.content,
			tiktok: tiktok.value.content,
			red_book: red_book.value.content
		})
		if (res.code == 200) {
			if (type) {
				uni.$uv.toast('修改成功')
				setTimeout(function() {
					uni.navigateBack()
				}, 2000);

			}
		}
	}, 200)
	const toedit = () => {
		uni.navigateTo({
			url: '/pages/user/editinfo/index'
		})
	}
	// 获取站外信息
	const getOutSideInfo = async () => {
		let res = await userstore.getOutSideInfo()
		if (res.code == 200) {
			mobile.value.content=res.data.mobile.content
			mobile.value.status=res.data.mobile.status
			wechat.value.content=res.data.wechat.content
			wechat.value.status=res.data.wechat.status
			qq.value.content=res.data.qq.content
			qq.value.status=res.data.qq.status
			email.value.content=res.data.email.content
			email.value.status=res.data.email.status
			tiktok.value.content=res.data.tiktok.content
			tiktok.value.status=res.data.tiktok.status
			red_book.value.content=res.data.red_book.content
			red_book.value.status=res.data.red_book.status
			
		}
	}
</script>

<style lang="scss" scoped>
	.outside {
		padding: 30rpx;

		.outside-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			width: 690rpx;
			height: 112rpx;
			background: #F6F6F6;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.outside-info {
				display: flex;

				.title {
					width: 100rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}

				.info {
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
				}

				.not-set {
					text-align: right;
					font-weight: 400;
					font-size: 28rpx;
					color: #222222;
					width: 410rpx;

					input {
						text-align: right;
						font-size: 28rpx;
					}
				}
			}
		}

		.edit-info-btn {
			position: fixed;
			bottom: 30rpx;
			width: 690rpx;
			height: 100rpx;
			background: #FE3052;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
			margin-bottom: constant(safe-area-inset-bottom);
			margin-bottom: env(safe-area-inset-bottom);
		}
	}
</style>